<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>订单查询</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="/assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/assets/js/html5shiv.min.js"></script>
		<script src="/assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="skin-3">
		<div id="navbar" class="navbar navbar-default          ace-save-state">
			<div class="navbar-container ace-save-state" id="navbar-container">
				<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
					<span class="sr-only">Toggle sidebar</span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>
				</button>

				<div class="navbar-header pull-left">
					<a href="/jpetstore/main" class="navbar-brand">
						<small>
							<i class="fa fa-share-square-o"></i>
							<span class="red">MyPetStore</span>
							<span class="black">后台管理</span>
						</small>
					</a>
				</div>

				<div class="navbar-buttons navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">

						<li class="light-yellow dropdown-modal">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="/assets/images/avatars/avatar2.png" alt="Jason's Photo" />
								<span class="user-info">
										<small>Hello,管理员</small>
									<!--									<div th:text="${session.account.username}"></div>-->
									</span>

								<i class="ace-icon fa fa-caret-down"></i>
							</a>

							<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a href="/jpetstore/profile">
										<i class="ace-icon fa fa-cog"></i>
										个人设置
									</a>
								</li>

								<li class="divider"></li>

								<li>
									<a href="#">
										<i class="ace-icon fa fa-power-off"></i>
										注销
									</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div><!-- /.navbar-container -->
		</div>

		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>

			<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
				<script type="text/javascript">
					try{ace.settings.loadState('sidebar')}catch(e){}
				</script>

				<ul class="nav nav-list">
					<li class="">
						<a href="/jpetstore/main">
							<i class="menu-icon fa fa-home"></i>
							<span class="menu-text"> 主页 </span>
						</a>

						<b class="arrow"></b>
					</li>
					<!--管理-->
					<li class="open">
						<a href="#" class="dropdown-toggle">
							<i class="menu-icon fa fa-list"></i>
							<span class="menu-text"> 管理 </span>

							<b class="arrow fa fa-angle-down"></b>
						</a>

						<b class="arrow"></b>

						<ul class="submenu">
							<li class="active">
								<a href="/jpetstore/order">
									<i class="menu-icon fa fa-caret-right"></i>
									订单查询
								</a>

								<b class="arrow"></b>
							</li>

							<li class="">
								<a href="/jpetstore/product">
									<i class="menu-icon fa fa-caret-right"></i>
									宠物管理
								</a>

								<b class="arrow"></b>
							</li>

							<li class="">
								<a href="/jpetstore/user">
									<i class="menu-icon fa fa-caret-right"></i>
									用户信息
								</a>

								<b class="arrow"></b>
							</li>
						</ul>
					</li>
					<!--管理员设置-->
					<li class="">
						<a href="/jpetstore/profile">
							<i class="menu-icon fa fa-user"></i>
							<span class="menu-text"> 管理员信息 </span>
						</a>

						<b class="arrow"></b>
					</li>
				</ul><!-- /.nav-list -->

				<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
					<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
				</div>
			</div>

			<div class="main-content">
				<div class="main-content-inner">
					<div class="breadcrumbs ace-save-state" id="breadcrumbs">
						<ul class="breadcrumb">
							<li>
								<i class="ace-icon fa fa-home home-icon"></i>
								<a href="/jpetstore/main">主页</a>
							</li>

							<li>
								<a href="#">管理</a>
							</li>
							<li class="active">订单查询</li>
						</ul><!-- /.breadcrumb -->
					</div>

					<div class="page-content">
						<div class="ace-settings-container" id="ace-settings-container">
							<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
								<i class="ace-icon fa fa-cog bigger-130"></i>
							</div>

							<div class="ace-settings-box clearfix" id="ace-settings-box">
								<div class="pull-left width-50">
									<div class="ace-settings-item">
										<div class="pull-left">
											<select id="skin-colorpicker" class="hide">
												<option data-skin="no-skin" value="blue">#438EB9</option>
												<option data-skin="skin-1" value="#222A2D">#222A2D</option>
												<option data-skin="skin-2" value="#C6487E">#C6487E</option>
												<option data-skin="skin-3" value="grey">#D0D0D0</option>

											</select>
										</div>
										<span>&nbsp;选择背景色</span>
									</div>

									<div class="ace-settings-item">
										<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
										<label class="lbl" for="ace-settings-hover"> 整理菜单</label>
									</div>

									<div class="ace-settings-item">
										<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
										<label class="lbl" for="ace-settings-compact"> 收缩菜单</label>
									</div>

<!--									<div class="ace-settings-item">-->
<!--										<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />-->
<!--										<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>-->
<!--									</div>-->
								</div><!-- /.pull-left -->

							</div><!-- /.ace-settings-box -->
						</div><!-- /.ace-settings-container -->


						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<div class="row">
									<div class="col-xs-12">
										<h3 class="header smaller lighter yellow">订单列表</h3>

										<div class="clearfix">
											<div class="pull-right tableTools-container green"></div>
										</div>
										<div class="table-header">
											订单查询结果
										</div>

										<!-- div.table-responsive -->

										<!-- div.dataTables_borderWrap -->
										<div>
											<table id="dynamic-table" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th class="center">
															<label class="pos-rel">
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
														</th>
														<th>订单编号</th>
														<th>买家名</th>
<!--														<th>-->
<!--&lt;!&ndash;															<i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>&ndash;&gt;-->
<!--															下单日期-->
<!--														</th>-->
<!--														<th>-->
<!--&lt;!&ndash;															<i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>&ndash;&gt;-->
<!--															截止日期-->
<!--														</th>-->
<!--														<th>付款卡类型</th>-->
														<th>银行卡号</th>
														<th>付款总额</th>
														<th class="hidden-480">快递公司</th>
														<th class="hidden-480">发货状态</th>

														<th></th>
													</tr>
												</thead>

												<tbody>
													<tr th:each="order:${orderList}">
														<td class="center">
															<label class="pos-rel">
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
														</td>

														<td id="table_orderId" th:text="${order.orderId}"></td>
														<td id="table_username" th:text="${order.username}"></td>
														<td id="table_orderDate" th:text="${order.orderDate}"></td>
														<td id="table_expiryDate" th:text="${order.expiryDate}"></td>
														<td id="table_cardType" th:text="${order.cardType}"></td>
														<td id="table_creditCard" th:text="${order.creditCard}"></td>
														<td id="table_totalPrice" th:text="${order.totalPrice}+'$'"></td>
														<td id="table_courier" th:text="${order.courier}"></td>
														<td class="hidden-480" th:switch="${order.status}">
															<span class="label label-sm label-warning" th:case="'P'">未发货</span>
															<span class="label label-sm label-success" th:case="*">已发货</span>
														</td>

														<td>
															<div class="hidden-sm hidden-xs action-buttons">
																<a class="yellow" href="#">
																	<i class="ace-icon fa fa-search-plus bigger-130"></i>
																</a>

																<a class="green" href="#">
																	<i class="ace-icon fa fa-pencil bigger-130"></i>
																</a>

																<a class="red" href="#">
																	<i class="ace-icon fa fa-trash-o bigger-130"></i>
																</a>
															</div>

															<div class="hidden-md hidden-lg">
																<div class="inline pos-rel">
																	<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
																		<i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
																	</button>

																	<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
																		<li>
																			<a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="yellow">
																					<i class="ace-icon fa fa-search-plus bigger-120"></i>
																				</span>
																			</a>
																		</li>

																		<li>
																			<a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
																				</span>
																			</a>
																		</li>

																		<li>
																			<a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="ace-icon fa fa-trash-o bigger-120"></i>
																				</span>
																			</a>
																		</li>
																	</ul>
																</div>
															</div>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>


								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<div class="footer">
				<div class="footer-inner">
					<div class="footer-content">
						<span class="bigger-120">
<!--							<span class="yellow bolder">Ace</span>-->
<!--&lt;!&ndash;							Application &copy; 2013-2014&ndash;&gt;-->
						</span>

						&nbsp; &nbsp;
<!--						<span class="action-buttons">-->
<!--							<a href="#">-->
<!--								<i class="ace-icon fa fa-twitter-square light-yellow bigger-150"></i>-->
<!--							</a>-->

<!--							<a href="#">-->
<!--								<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>-->
<!--							</a>-->

<!--							<a href="#">-->
<!--								<i class="ace-icon fa fa-rss-square orange bigger-150"></i>-->
<!--							</a>-->
<!--						</span>-->
<!--					</div>-->
				</div>
			</div>

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->
<!--弹出层-->
		<div id="modal-table1" class="modal fade" tabindex="-1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header no-padding">
						<div class="table-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								<span class="white">&times;</span>
							</button>
							订单信息
						</div>
					</div>

					<div class="modal-body no-padding">
						<div class="hr hr-dotted"></div>
						<form class="form-horizontal">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">订单编号:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input id="modal1_orderId" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄姓名:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input  id="modal1_shippingfirstname" class="input-small" type="text" readonly="readonly">
										<input  id="modal1_shippinglastname" class="input-small" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄地址:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input  id="modal1_shippingaddr1" class="input-small" type="text" readonly="readonly">
										<input  id="modal1_shippingaddr2" class="input-small" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄城市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  id="modal1_shippingcity" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄省市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  id="modal1_shippingstate" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄国家:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  id="modal1_shippingcountry" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄邮编:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  id="modal1_shippingzip" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">账单姓名:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input  id="modal1_billinglastname" class="input-small" type="text" readonly="readonly">
										<input  id="modal1_billingfirstname" class="input-small" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">账单地址:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input  id="modal1_billingaddr1" class="input-small" type="text" readonly="readonly">
										<input  id="modal1_billingaddr2" class="input-small" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄城市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  id="modal1_billingcity" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄省市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  id="modal1_billingstate" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄国家:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  id="modal1_billingcountry" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄邮编:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  id="modal1_billingzip" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<div class="col-xs-12 col-sm-9">
									<label class="control-label col-xs-12 col-sm-3 no-padding-right"></label>
									<table class="table table-bordered table-hover col-xs-12 col-sm-6 " style="width: 300px;overflow: auto;">
										<thead>
											<tr>
												<th>商品编号</th>
												<th>描述信息</th>
												<th>数量</th>
												<th>价格</th>
												<th>总计</th>
											</tr>
										</thead>
										<tbody id="table_body1">

										</tbody>

										<!--								<tr th:each="lineItem:${order.lineItems}">-->
										<!--									<td>-->
										<!--										<a th:href="'/catalog/viewItem?itemId='+${lineItem.item.itemId}" th:text="${lineItem.item.itemId}">${lineItem.item.itemId}</a>-->
										<!--									</td>-->
										<!--									<td th:if="${lineItem.item} != null" th:text="${lineItem.item.attribute1}+-->
										<!--								${lineItem.item.product.name}">-->
										<!--								<span th:if="${lineItem.item} == null">-->
										<!--									<i>{description unavailable}</i>-->
										<!--								</span>-->
										<!--									</td>-->

										<!--									<td th:text="${lineItem.quantity}">${lineItem.quantity}</td>-->
										<!--									<td th:text="'$'+${#numbers.formatDecimal(lineItem.unitPrice,1,2)}"></td>-->
										<!--									<td th:text="'$'+${#numbers.formatDecimal(lineItem.total,1,2)}"></td>-->
										<!--								</tr>-->
									</table>
								</div>

							</div>

							<hr>

						</form>


					</div>

					<div class="modal-footer no-margin-top">
						<button class="btn btn-sm btn-success hide pull-left" data-last="Finish">
							<i class="ace-icon fa fa-check"></i>
							提交
						</button>
						<button class="btn btn-sm btn-danger" data-dismiss="modal">
							<i class="ace-icon fa fa-times"></i>
							关闭
						</button>

					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div>

		<div id="modal-table2" class="modal fade" tabindex="-1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header no-padding">
						<div class="table-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								<span class="white">&times;</span>
							</button>
							订单信息
						</div>
					</div>

					<div class="modal-body no-padding">
						<div class="hr hr-dotted"></div>
						<form action="/jpetstore/updateorder" method="post" id="update_orderfrom" class="form-horizontal" th:object="${updateOrder}">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">订单编号:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{orderId}" id="modal2_orderId" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">付款卡类型:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<select id="modal2_cardType" class="col-xs-12 col-sm-6" th:field="*{cardType}">
											<option th:each="cardType:${CARD_LIST}" th:value="${cardType}" th:text="${cardType}">
											</option>
										</select>
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">付款卡号:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{creditCard}" id="modal2_creditCard" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄姓名:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input  th:field="*{shipToFirstName}" id="modal2_shippingfirstname" class="input-small" type="text" >
										<input  th:field="*{shipToLastName}" id="modal2_shippinglastname" class="input-small" type="text" >
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄地址:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input  th:field="*{shipAddress1}"  id="modal2_shippingaddr1" class="input-small" type="text" >
										<input  th:field="*{shipAddress2}" id="modal2_shippingaddr2" class="input-small" type="text" >
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄城市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  th:field="*{shipCity}" id="modal2_shippingcity" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄省市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  th:field="*{shipState}" id="modal2_shippingstate" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄国家:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  th:field="*{shipCountry}" id="modal2_shippingcountry" class="col-xs-12 col-sm-6" type="text" >
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮寄邮编:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  th:field="*{shipZip}" id="modal2_shippingzip" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">账单姓名:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input  th:field="*{billToLastName}" id="modal2_billinglastname" class="input-small" type="text">
										<input  th:field="*{billToFirstName}" id="modal2_billingfirstname" class="input-small" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">账单地址:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input  th:field="*{billAddress1}" id="modal2_billingaddr1" class="input-small" type="text">
										<input  th:field="*{billAddress2}" id="modal2_billingaddr2" class="input-small" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">账单城市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  th:field="*{billCity}" id="modal2_billingcity" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">账单省市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  th:field="*{billState}" id="modal2_billingstate" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">账单国家:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  th:field="*{billCountry}" id="modal2_billingcountry" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">账单邮编:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input  th:field="*{billZip}" id="modal2_billingzip" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">发货状态:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<select id="modal2_status" class="col-xs-12 col-sm-6" th:field="*{status}">
											<option th:text="已发货" th:value="E"></option>
											<option th:text="未发货" th:value="P"></option>
										</select>
									</div>
								</div>
							</div>

							<hr>

						</form>


					</div>

					<div class="modal-footer no-margin-top">
						<button class="btn btn-sm btn-success pull-left" data-last="Finish">
							<i class="ace-icon fa fa-check"></i>
							提交
						</button>
						<button class="btn btn-sm btn-danger" data-dismiss="modal">
							<i class="ace-icon fa fa-times"></i>
							关闭
						</button>

					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div>
		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/assets/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="/assets/js/jquery.dataTables.min.js"></script>
		<script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="/assets/js/dataTables.buttons.min.js"></script>
		<script src="/assets/js/buttons.flash.min.js"></script>
		<script src="/assets/js/buttons.html5.min.js"></script>
		<script src="/assets/js/buttons.print.min.js"></script>
		<script src="/assets/js/buttons.colVis.min.js"></script>
		<script src="/assets/js/dataTables.select.min.js"></script>

		<!-- ace scripts -->
		<script src="/assets/js/ace-elements.min.js"></script>
		<script src="/assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				//initiate dataTables plugin
				var myTable = 
				$('#dynamic-table')
				// .wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
				.DataTable( {
					bAutoWidth: false,
					"aoColumns": [
					  { "bSortable": false },
					  null, null,null, null, null, null, null, null, null,
					  { "bSortable": false },
					],
					"aaSorting": [],
					"language": {
						"processing": "处理中...",
						"lengthMenu": "显示 _MENU_ 项结果",
						"zeroRecords": "没有匹配结果",
						"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
						"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
						"infoFiltered": "(由 _MAX_ 项结果过滤)",
						"infoPostFix": "",
						"search": "搜索:",
						"searchPlaceholder": "搜索...",
						"url": "",
						"emptyTable": "表中数据为空",
						"loadingRecords": "载入中...",
						"infoThousands": ",",
						"paginate": {
							"first": "首页",
							"previous": "上页",
							"next": "下页",
							"last": "末页"
						},
						"aria": {
							paginate: {
								first: '首页',
								previous: '上页',
								next: '下页',
								last: '末页'
							},
							"sortAscending": ": 以升序排列此列",
							"sortDescending": ": 以降序排列此列"
						},
						"decimal": "-",
						"thousands": "."
					},
					
					// "bProcessing": true,
			        //"bServerSide": true,
			        //"sAjaxSource": "http://127.0.0.1/table.php"	,
			
					//,
					//"sScrollY": "200px",
					//"bPaginate": false,
			
					//"sScrollX": "100%",
					//"sScrollXInner": "120%",
					//"bScrollCollapse": true,
					//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
					//you may want to wrap the table inside a "div.dataTables_borderWrap" element
			
					//"iDisplayLength": 50
			
			
					select: {
						style: 'multi'
					}
			    } );
			
				
				
				$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';
				
				new $.fn.dataTable.Buttons( myTable, {
					buttons: [
					  {
						"extend": "colvis",
						"text": "<i class='fa fa-search bigger-110 yellow'></i> <span class='hidden'>显示/隐藏 列</span>",
						"className": "btn btn-white btn-primary btn-bold",
						columns: ':not(:first):not(:last)'
					  },
					  {
						"extend": "copy",
						"text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>复制到粘贴板</span>",
						"className": "btn btn-white btn-primary btn-bold"
					  },
					  {
						"extend": "csv",
						"text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>输出 CSV</span>",
						"className": "btn btn-white btn-primary btn-bold"
					  }
					]
				} );
				myTable.buttons().container().appendTo( $('.tableTools-container') );
				
				//style the message box
				var defaultCopyAction = myTable.button(1).action();
				myTable.button(1).action(function (e, dt, button, config) {
					defaultCopyAction(e, dt, button, config);
					$('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
				});
				
				
				var defaultColvisAction = myTable.button(0).action();
				myTable.button(0).action(function (e, dt, button, config) {
					
					defaultColvisAction(e, dt, button, config);
					
					
					if($('.dt-button-collection > .dropdown-menu').length == 0) {
						$('.dt-button-collection')
						.wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
						.find('a').attr('href', '#').wrap("<li />")
					}
					$('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
				});
			
				////
			
				setTimeout(function() {
					$($('.tableTools-container')).find('a.dt-button').each(function() {
						var div = $(this).find(' > div').first();
						if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
						else $(this).tooltip({container: 'body', title: $(this).text()});
					});
				}, 500);
				
				
				
				
				
				myTable.on( 'select', function ( e, dt, type, index ) {
					if ( type === 'row' ) {
						$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
					}
				} );
				myTable.on( 'deselect', function ( e, dt, type, index ) {
					if ( type === 'row' ) {
						$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
					}
				} );
			
			
			
			
				/////////////////////////////////
				//table checkboxes
				$('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
				
				//select/deselect all rows according to table header checkbox
				$('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]').eq(0).on('click', function(){
					var th_checked = this.checked;//checkbox inside "TH" table header
					
					$('#dynamic-table').find('tbody > tr').each(function(){
						var row = this;
						if(th_checked) myTable.row(row).select();
						else  myTable.row(row).deselect();
					});
				});
				
				//select/deselect a row when the checkbox is checked/unchecked
				$('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
					var row = $(this).closest('tr').get(0);
					if(this.checked) myTable.row(row).deselect();
					else myTable.row(row).select();
				});
			
			
			
				$(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
					e.stopImmediatePropagation();
					e.stopPropagation();
					e.preventDefault();
				});

				$('#dynamic-table').delegate('.fa-search-plus','click',function(){
					var orderId = $(this).closest('tr').find("td[id='table_orderId']").text();
					$.ajax({
						type:"get",
						url:"/jpetstore/getOrder",
						data:{
							"orderId":orderId
						},
						dataType:"json",

						success:function(data){
							$("#modal1_orderId").val(data.orderId);
							$("#modal1_shippingaddr1").val(data.shipAddress1);
							$("#modal1_shippingaddr2").val(data.shipAddress2);
							$("#modal1_shippingfirstname").val(data.shipToFirstName);
							$("#modal1_shippinglastname").val(data.shipToLastName);
							$("#modal1_shippingcity").val(data.shipCity);
							$("#modal1_shippingstate").val(data.shipState);
							$("#modal1_shippingzip").val(data.shipZip);
							$("#modal1_shippingcountry").val(data.shipCountry);
							$("#modal1_billingaddr1").val(data.billAddress1);
							$("#modal1_billingaddr2").val(data.billAddress2);
							$("#modal1_billingfirstname").val(data.billToFirstName);
							$("#modal1_billinglastname").val(data.billToLastName);
							$("#modal1_billingcity").val(data.billCity);
							$("#modal1_billingstate").val(data.billState);
							$("#modal1_billingzip").val(data.billZip);
							$("#modal1_billingcountry").val(data.billCountry);
							var order_table = $("#table_body1");
							order_table.text("");
							var total = 0;
							$.each(data.lineItems,function (index,value) {
								order_table.append("<tr>");
								order_table.append("<td class='center'>"+value.item.itemId+"</td>");
								order_table.append("<td class='center'>"+value.item.attribute1+"</td>");
								order_table.append("<td class='center'>"+value.quantity+"</td>");
								order_table.append("<td class='center'>"+value.unitPrice+"</td>");
								total = total + value.total;
								order_table.append("<td class='center'>"+value.total+"</td>");
								order_table.append("</tr>");
							});
							order_table.append("<tr><th colspan='5'>总计:<span>"+total+"</span></th></tr>");
							$("#modal-table1").modal("show");
						}
					});
				});
				$('#dynamic-table').delegate('.fa-trash-o','click',function(){
					var orderId = $(this).closest('tr').find("td[id='table_orderId']").text();
					$.ajax({
						type:"get",
						url:"/jpetstore/deleteorder",
						data:{
							"orderId":orderId
						},
						dataType:"text",

						success:function(data){
							if (data == "fail"){

							}else {
								console.log(data);
								window.location.href = "/jpetstore/order";//指向登录的页面地址
							}
						}
					});
				});
				$('#dynamic-table').delegate('.fa-pencil','click',function(){
					var orderId = $(this).closest('tr').find("td[id='table_orderId']").text();
					$.ajax({
						type:"get",
						url:"/jpetstore/getOrder",
						data:{
							"orderId":orderId
						},
						dataType:"json",

						success:function(data){
							$("#modal2_orderId").val(data.orderId);
							$("#modal2_shippingaddr1").val(data.shipAddress1);
							$("#modal2_shippingaddr2").val(data.shipAddress2);
							$("#modal2_shippingfirstname").val(data.shipToFirstName);
							$("#modal2_shippinglastname").val(data.shipToLastName);
							$("#modal2_shippingcity").val(data.shipCity);
							$("#modal2_shippingstate").val(data.shipState);
							$("#modal2_shippingzip").val(data.shipZip);
							$("#modal2_shippingcountry").val(data.shipCountry);
							$("#modal2_billingaddr1").val(data.billAddress1);
							$("#modal2_billingaddr2").val(data.billAddress2);
							$("#modal2_billingfirstname").val(data.billToFirstName);
							$("#modal2_billinglastname").val(data.billToLastName);
							$("#modal2_billingcity").val(data.billCity);
							$("#modal2_billingstate").val(data.billState);
							$("#modal2_billingzip").val(data.billZip);
							$("#modal2_billingcountry").val(data.billCountry);
							$("#modal2_creditCard").val(data.creditCard);
							$("#modal2_cardType").val(data.cardType);
							$("#modal2_status").val(data.status);
							$("#modal-table2").modal("show");
						}
					});
				});

				$('.btn-success').on('click',function (e) {
					$('#update_orderfrom').submit();
				});

			
				/********************************/
				//add tooltip for small view action buttons in dropdown menu
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				
				//tooltip placement on right or left
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}





				/**
				//add horizontal scrollbars to a simple table
				$('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
				  {
					horizontal: true,
					styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
					size: 2000,
					mouseWheelLock: true
				  }
				).css('padding-top', '12px');
				*/
			
			
			})
		</script>
		</div>
	</body>
</html>
